<div class="form-horizontal">
  <div class="form-group" v-for="(field, index) in dynamicSpecs" :key="index">
    <label class="control-label col-md-3">{{ field.name }}</label>
    <div class="col-md-9">
      <span
        class="btn btn-default"
        v-for="(opt, optIndex) in field.options"
        :key="optIndex"
      >
        {{ opt }}
        <i class="fa fa-close" @click="removeOption(field, optIndex)"></i>
      </span>
      <kb-form
        simple
        v-if="field.showNewOptionForm"
        class="form-inline"
        style="display: inline-block;"
        :model="field"
        :rules="rules"
        ref="form"
      >
        <kb-form-item prop="newValue" class="form-group">
          <template v-slot="error">
            <div :class="{'has-error': !!error.error}">
              <input
                type="text"
                class="form-control"
                v-model="field.newValue"
                @keydown.enter="saveOption(field, index)"
                v-kb-tooltip:top.manual.error="error.error"
              />
              <button class="btn btn-default" @click="saveOption(field, index)"
                ><i class="fa fa-check"></i
              ></button>
              <button class="btn btn-default" @click="resetForm(field, index)"
                ><i class="fa fa-close"></i
              ></button>
            </div>
          </template>
        </kb-form-item>
      </kb-form>
      <button
        class="btn dark"
        @click="addOption(field)"
        v-show="!field.showNewOptionForm"
        ><i class="fa fa-plus"></i
      ></button>
    </div>
  </div>
</div>
